<template>
	<div class="check-page" v-if="details">
		<top-header :title="header_title"></top-header>
		<large-card>
			<template v-slot:contentPadding>
				<div class="card-check display-col">
					<van-swipe class="my-swipe" indicator-color="white">
						<van-swipe-item v-for="(item, index) in details.imgs_json" :key="index">
							<van-image class="my-swipe-img" :src="item" />
						</van-swipe-item>
					</van-swipe>
					<div class="card-check__content display">
						<div>
							<div class="padding-12 font-size-22">{{ details.name }}</div>
							<div class="display font-size-16 padding-12 card-content-time" style="justify-content: flex-start">
								<span class="font-color-blue display time">营业时间</span>
								<span class="display time">{{ details.shop.work_day_start }}~{{ details.shop.work_day_end }}</span>
							</div>
						</div>

						<div class="font-color-8C9198 padding-0-12 font-size-14">{{ details.shop.address }}</div>
						<div class="display padding-12 width-100" style="padding: 0.458937rem 0.289855rem 0 0.289855rem">
							<div class="font-size-12 font-color-8C9198">销量 {{ details.virtual_sale_num }}</div>
							<div class="font-color-red">
								<span class="font-size-18">￥</span
								><span class="font-size-24">{{ details.price_min }}~{{ details.price_max }}</span>
							</div>
						</div>
					</div>
				</div>
			</template>
		</large-card>
		<div class="display-around shop-card">
			<img :src="details.shop.imgs_json[0]" class="shop-card-img" />
			<div style="width: 190px">
				<div class="font-weight-500 font-size-16">{{ details.shop.name }}</div>
				<div class="font-size-12 font-color-8C9198" style="margin-top: 0.096618rem">
					{{ details.shop.address }}
				</div>
			</div>
			<div class="card-button" @click="handleGetShopInfo">全部商品</div>
		</div>
		<div class="title font-size-18 font-weight-500">商品简介</div>
		<div class="content-box">
			<div class="html" v-html="details.content_html"></div>
		</div>
		<payCheck v-if="$route.query.module_name !== '4'" :isShop="true" :shop="details.shop" @openDialog="openDialog" />
		<shopping-cart-tabbar v-else :module_name="$route.query.module_name" />
		<div class="po_fi modal" v-if="purchaseDialog" @click="purchaseDialog = false">
			<div class="po_ab dialog animated" @click.stop>
				<div class="m-t-15 flex-1 fx-items-center route-line m-b-25" style="height: 80px">
					<div style="width: 80px; height: 80px; box-sizing: border-box">
						<img style="width: 100%; height: 100%" :src="defaultSku.img[0]" alt="" />
					</div>
					<div class="fx-1 fx-column fx-between" style="height: 100%; box-sizing: border-box">
						<div class="fx-1 size-20 p-r-20 p-l-20">
							{{ defaultSku.price }}
						</div>
						<div class="fx-items-center fx-between fx-1 p-r-20 p-l-20">
							<div class="size-16">库存：{{ defaultSku.stock }}</div>
							<div>
								<van-stepper v-model="purchaseNum" :max="defaultSku.stock" />
							</div>
						</div>
					</div>
				</div>
				<div class="fx-column fx-items-start" style="padding-left: 0.724638rem">
					<div
						class="p-5 size-16 spec"
						:class="item.id === defaultSku.id ? 'select-spec' : ''"
						v-for="(item, index) in details.sku"
						:key="index"
						@click="selectSku(item)"
					>
						{{ item.name }}
					</div>
				</div>

				<div class="m-t-10 purchase-box p-t-10 p-b-10 p-l-20 p-r-20">
					<div class="fx-1 p-10 button size-16" @click="goPay">购买</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import payCheck from '@/components/payCheck';
import ShoppingCartTabbar from '@/components/ShoppingCartTabbar';
import TopHeader from '@/components/TopHeader';
import largeCard from '@/components/largeCard';
import cookie from '@/utils/cookie';
import { Toast } from 'vant';
export default {
	name: 'index',
	components: {
		payCheck,
		ShoppingCartTabbar,
		TopHeader,
		largeCard,
	},
	data() {
		return {
			purchaseDialog: false,
			purchaseNum: 1, //购买数量
			order_id: '', //订单id
			header_title: '', //顶部headertitle
			details: null, //商品详情
			defaultSku: null,
		};
	},
	mounted() {
		this.order_id = this.$route.query.order_id;
		_api
			.api_userPortal_tourProduct_getById({
				tour_product_id: this.$route.query.tour_product_id,
				level: 'prices,shop,sku',
			})
			.then((res) => {
				this.details = res.data;
				switch (res.data.type) {
					case 1:
						this.header_title = '门票详情';
						setTimeout((_) => {
							document.title = '门票详情';
						}, 300);
						break;
					case 2:
						this.header_title = '房间详情';
						setTimeout((_) => {
							document.title = '房间详情';
						}, 300);
						break;
					case 3:
						this.header_title = '美食详情';
						setTimeout((_) => {
							document.title = '美食详情';
						}, 300);
						break;
					case 4:
						this.header_title = '商品详情';
						setTimeout((_) => {
							document.title = '商品详情';
						}, 300);
						break;
				}
				if (this.details.sku) {
					this.defaultSku = this.details.sku[0];
				}
				console.log(JSON.stringify(res));
			})
			.catch((err) => {});
	},
	methods: {
		handleGetShopInfo() {
			//去往商户列表页
			this.$router.push({
				path: '/masterPage',
				query: { id: this.details.id, shop_id: this.details.shop_id, type: this.details.type },
			});
		},
		selectSku(e) {
			this.defaultSku = e;
		},
		goPay() {
			this.$router.push({
				path: '/SubmitOrder',
				query: {
					tour_product_id: this.$route.query.tour_product_id,
					skuId: this.defaultSku.id,
					purchaseNum: this.purchaseNum,
					type: this.details.type,
				},
			});
		},
		openDialog(e) {
			console.log(e);
			if (cookie.get('userLogin')) {
				this.purchaseDialog = e;
			} else {
				Toast('请先登录');
				this.$router.push('/Login');
			}
		},
	},
};
</script>

<style lang="scss" >
@import '../../../styles/ys-style.css';
@import 'style.scss';
.content-box {
	padding: 0 0.338164rem 0 0.338164rem;
	background: #ffffff;
	border-radius: 0.144928rem;
	box-shadow: 0rem 0.096618rem 0.193237rem 0rem rgba(0, 0, 0, 0.08);
}
.html {
	img {
		width: 100%;
	}
	word-wrap: break-word;
}
.modal {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.08);
	.dialog {
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 0.483092rem 0.483092rem 0px 0px;
		background-color: #fff;
		.route-line {
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			padding-left: 0.724638rem;
			color: #666666;
		}
	}
}
.spec {
	margin-bottom: 0.241546rem;
	border: 1px solid rgb(225, 225, 223);
	min-width: 3.623188rem;
	text-align: center;
}
.select-spec {
	border: 1px solid rgb(255, 72, 44) !important;
}
.purchase-box {
	border-top: 1px solid rgb(225, 225, 223);
	.button {
		text-align: center;
		background-color: rgb(255, 72, 44);
		color: #fff;
	}
}
</style>
 